<template>
    <div class="header">
      <div class="header-left">
        <span class="iconfont fanhui">&#xe624;</span>
      </div>
      <div class="header-input"><span class="iconfont input-icon">&#xe632;</span>请输入/城市/酒店/景点</div>
      <router-link to="/city">
        <div class="header-right">
          {{this.city}}
          <span class="iconfont right-icon">&#xe695;</span></div>
      </router-link>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Header',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang='stylus' scoped>
.header
  display: flex
  height: .86rem
  line-height: .86rem
  background-color: #00bcd4
  color: #fff
  .header-left
   width: .64rem
   .fanhui
    font-size: .3rem
    margin-left: .2rem
    padding-top: .4rem
  .header-input
   flex :1
   background: #ffffff
   border-radius: .1rem
   margin-top:.12rem
   margin-bottom:.12rem
   margin-left: .2rem
   color: #cccccc
   line-height: .64rem
   height: .64rem
   .input-icon
    margin-left: .2rem
    font-size: .32rem
  .header-right
   color: #ffffff
   min-width: 1.04rem
   padding: .1rem
   text-align: center
   .right-icon
    font-size: .2rem
</style>
